<template>
  <div class="app-view ant-card-type-inner">
    <slot v-if="$slots.header" name="header" />
    <div v-if="title" class="ant-card-head">
      <div class="ant-card-head-wrapper">
        <div class="ant-card-head-title">{{ title }}</div>
      </div>
    </div>
    <div class="app-view-content">
      <slot />
    </div>
    <slot v-if="$slots.footer" name="footer" />
  </div>
</template>

<script>
export default {
  name: 'View',
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  created() {
    // console.log(this.title)
  }
}
</script>

<style lang="scss">
.app-view {
  background: #fff;
  min-height: calc(100vh - 150px);
  .app-view-content {
    padding: 20px;
  }
}
</style>
